<template>
  <draggable
    v-model="currNode"
    :class="['vc-container', !currNode.children || currNode.children.length === 0 ? 'empty' : '']"
    :style="visual.parseStyle(compStyle)"
    :inputParam="inputParam"
    @mouseoverNode="mouseoverNode"
    @activeNode="activeNode"
    @deleteNode="deleteNode"
  />
</template>

<script setup>
import { ref } from "vue";
import Draggable from '@/admin/visual/draggable.vue';
import visual from "@/visual/js/visual";

const emit = defineEmits(['activeNode', 'deleteNode', 'mouseoverNode']);
const props = defineProps({
  node: Object,
  compStyle: Object,
  inputParam: Object
});
const currNode = ref(props.node);

const activeNode = (node) => {
  emit('activeNode', node);
};

const deleteNode = (item) => {
  emit('deleteNode', item, currNode.value.children);
};

const mouseoverNode = (item) => {
  emit('mouseoverNode', item)
};
</script>